/*
 * @Description: 车辆信息组件，包含车辆名与经过站点
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:40:21
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:46:49
 */
<template>
  <div
    class="line_main fontsize32"
    tabindex="0"
    @blur="toggleList = false"
    hidefocus="true"
  >
    <div class="change_icon">
      <i class="iconfont icon-change fontsize48"></i>
    </div>
    <div class="line_info">
      <div class="station">
        <i class="iconfont icon-shi  fontsize48"></i>
        <span>凯撒大帝</span>
      </div>
      <div
        class="station_list"
        @click="toggleList = !toggleList"
      >
        <div
          class="station_num"
          :style="{height: (toggleList ? 0 : numHeight)}"
        >
          <span>4站</span>
          <i class="iconfont icon-unflod"></i>
        </div>
        <div
          class="station_way"
          :style="{height: (toggleList ? wayHeight : 0)}"
        >
          <p>苏丹皇宫</p>
          <p>蛋糕房</p>
          <p>国防航空</p>
          <p>普兰店</p>
        </div>
      </div>
      <div class="station">
        <i class="iconfont icon-zhong fontsize48"></i>
        <span>官方火凤凰</span>
      </div>
      <div class="long_string"></div>
    </div>
    <div
      @click="goToMap"
      class="map_icon"
    >
      <i class="iconfont icon-ditu-01 fontsize48"></i>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      toggleList: false, // 总站数与具体站名的切换状态
      wayHeight: 0, // 具体站名所在div高度
      numHeight: '' // 总站数所在div高度
    }
  },
  mounted () {
    let size = parseFloat(document.getElementsByTagName('html')[0].style.fontSize) // 获取当前根字体大小
    this.numHeight = 0.746667 * size + 'px' // 计算站点数div高度
    this.wayHeight = 4 * 0.533333 * size + 'px' // 计算中间站点div高度
  },
  methods: {
    goToMap () {
      this.$router.push({ name: 'map' })
    }
  }
}
</script>

<style lang="scss" scoped>
.line_main {
  width: 686px;
  background: linear-gradient(
    90deg,
    rgba(39, 132, 255, 1) 0%,
    rgba(78, 129, 250, 1) 100%
  );
  border-radius: 4px; /*no*/
  margin: auto;
  margin-bottom: 32px;
  color: #fff;
  position: relative;
  outline: none;
  .change_icon {
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 32px;
    margin: auto;
  }
  .line_info {
    padding: 28px 0;
    padding-left: 96px;
    .station {
      i {
        height: 44px;
        line-height: 44px;
        display: inline-block;
        position: relative;
        top: 4px;
      }
      span {
        height: 44px;
        line-height: 44px;
        display: inline-block;
        padding-left: 24px;
      }
    }
    .station_list {
      padding: 10px 0;
      padding-left: 80px;
      .station_num {
        transition: all 0.5s;
        overflow: hidden;
        i {
          height: 56px;
          line-height: 56px;
          display: inline-block;
        }
        span {
          height: 56px;
          line-height: 56px;
          display: inline-block;
        }
      }
      .station_way {
        height: 0;
        overflow: hidden;
        transition: all 0.5s;
        p {
          height: 40px;
          line-height: 40px;
        }
      }
    }
    .long_string {
      width: 6px;
      height: calc(100% - 130px);
      background-color: #fff;
      position: absolute;
      left: 118px;
      top: 64px;
    }
  }
  .map_icon {
    position: absolute;
    top: 28px;
    right: 34px;
  }
}
</style>
